﻿
@{
    ViewBag.Title = "ConfigUserCities";
}
@section style{
    <style>
        .inline {
            display: inline-block
        }

        .province {
            float: left;
            width: 8%;
            padding: 0;
            text-align: center;
        }

        .citys {
            float: left;
            width: 92%;
            overflow: hidden;
        }

        .city-item {
            float: left;
            padding-right: 5px;
            padding-top: 5px;
            font-size: 16px;
        }

        .form-horizontal .control-label {
            font-size: 16px;
        }

        .box-footer {
            box-sizing: border-box;
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            background-color: white;
        }

        .box-body {
            padding-bottom: 55px;
            padding-top: 50px;
        }

        .position-top {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            background-color: white;
            z-index: 120;
            margin-bottom: 0;
            padding-bottom: 17px;
            padding-top: 10px;
        }

        .position-btn {
            position: fixed;
            left: 0;
            top: 0px;
            width: 100%;
            background-color: white;
            z-index: 120;
            margin-bottom: 0;
            padding-bottom: 15px;
            border-bottom: 2px solid #eee;
        }

        .box.box-default {
            border-color: #fff;
        }
    </style>
    <link href="@Url.Content("~/css/plat/blue.css")" rel="stylesheet">
}
<form id="form1" class="form-horizontal">
    <section class="content">
        <div class="row">
            <div class="col-md-12">
                <div class="box-body">
                    <div class="box box-default">
                        <div class="form-group position-btn">
                            <label class="col-sm-2 control-label " for="name">
                                <input type="button" class="btn btn-primary" id="selAll" value="全选" />
                                <input type="button" class="btn btn-primary" id="selInvert" value="反选" />
                            </label>
                            @*<div class="col-sm-8 " style="padding-top:15px;">
                                    <span style="color:red; ">注：勾选标红城市会覆盖该城市在其他模版中的配置</span>
                                </div>*@
                        </div>
                        <div id="cityArea">
                            @*<div class="form-group" style="overflow:hidden;">
                                    <label class="col-sm-2 control-label province" for="name">
                                        北京
                                    </label>
                                    <div class="col-sm-3 citys">
                                        <div class="city-item">
                                            <input type="checkbox" value="201" />北京
                                        </div>
                                    </div>
                                    <div class="col-sm-3 citys">
                                        <div class="city-item">
                                            <input type="checkbox" value="201" />北京
                                        </div>
                                    </div>
                                </div>*@
                        </div>

                    </div>
                </div>
                <div class="box-footer text-center">
                    <button class="btn btn-primary" type="button" id="btnSave">确 定 </button>
                    <button class="btn" type="button" id="cancel">取 消 </button>
                </div>
            </div>

        </div>
        <!-- /.row -->
    </section>

</form>

@section scriptsBottom{
    <script src="@Url.Content("~/js/icheck.min.js")"></script>
    <script src="~/js/citydata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var initSelCitysStr = '@ViewBag.Cities' || "";//当前用户配置的城市，编辑页面需要默认选中
            initCitys(initSelCitysStr);
            $("#btnSave").click(function () {
                save();
            });
            $("#cancel").click(function () {
                BMCW.closeTopLayer();
            });
        });


        function save() {
                var selCityStr = "";
                var $selCity = $("#cityArea").find(".city-item input[type='checkbox']:checked");
                if ($selCity.length > 0) {
                    $selCity.each(function () {
                        selCityStr += $(this).data("pid") + "-" + $(this).val()+ ",";
                    });
                    selCityStr = selCityStr.substring(0, selCityStr.length - 1);
            }
            console.log(selCityStr);
                  var ajaxOption=  {
                        url: '@Url.Action("UserCitiesSave", "User")',
                        type: "Post",
                      data: {
                          SelCitiesStr: encodeURI(selCityStr),
                            UserId: '@ViewBag.UserId',
                        },
                        success: function (o) {
                            if (o.status == 0) {
                                BMCW.msg("保存成功", function () {
                                    BMCW.getTopSelectedWin().search();
                                });
                            } else {
                                BMCW.alert(o.message);
                            }
                        }
                    };
                 BMCW.ajax(ajaxOption);
        };



        /**
         * 初始化城市
         * @@param selCitys 默认选择的城市，字符串逗号间隔
         */

        function initCitys(selCitys) {
            //选中的城市
            var arr = [];
            if (typeof (selCitys) == 'string' && selCitys != "")
                arr = selCitys.split(',');
            //模板渲染
            var data = citydata;
            var pdata = citydata[100000];
            var strHtml = "";
            $.each(pdata, function (pindex, pname) {
                strHtml += '<div class="form-group" style="overflow:hidden;">';
                strHtml += '<label class="col-sm-2 control-label province" for="name">' + pname+'</label>';
                strHtml += '<div class="col-sm-3 citys">';
                var cdata = data[pindex];//城市数据
                $.each(cdata, function (cindex, cname) {
                    strHtml += '<div class="city-item">';
                    if (arr.indexOf(cindex) > -1) {
                        strHtml += '<input type="checkbox" checked="checked" data-pid="'+pindex+'" value="' + cindex + '" />';
                    } else {
                        strHtml += '<input type="checkbox"  data-pid="'+ pindex +'" value="' + cindex + '" />' ;
                    }
                    strHtml += '<span>' + cname + '</span>';
                    strHtml+='</div>'
                });
                strHtml += '</div>';
                strHtml += '</div>';
            });
            $("#cityArea").html(strHtml);
            $('input').iCheck({
                checkboxClass: 'icheckbox_flat-blue'
            });
            initEventBind();
        }
        function initEventBind() {
            //全国全选
            $("#selAll").on('click', function () {
                $('input').iCheck('check');
            });
            //全国反选
            $("#selInvert").on('click', function () {
                $('input').iCheck('uncheck');
            });
          
        }
    </script>
}


